<template>
  <div class="slide-show" @mouseover="clearInv" @mouseout="runInv">
    <!--//为了避免轮播图转动太快，使用了鼠标事件，上去就是暂停-->
    <div class="slide-img">
      <a :href="slides[nowIndex].href">
        <transition name="slide-trans">
          <img v-if="isShow" :src="slides[nowIndex].src">
        </transition>
        <transition name="slide-trans-old">
          <img v-if="!isShow" :src="slides[nowIndex].src">
        </transition>
      </a>
    </div>
    <h2>{{ slides[nowIndex].title }}</h2>
    <ul class="slide-pages">
      <li @click="goto(prevIndex)"><a>&lt;</a></li>
      <li v-for="(item,index) in slides" @click="goto(index)">
          <a :class="{on:index === nowIndex}">{{ index + 1 }}</a>
      </li>
      <li @click="goto(nextIndex)"><a>&gt;</a></li>
    </ul>
  </div>
</template>

<script>
 export  default{
   props:{  //接收什么属性
     slides: {
       type: Array,   //slider的类型是数组
       default: []
     },
     inv:{
       type: Number,
       default:1500
     }
   },
   data(){
     return{
       nowIndex:0,
       isShow:true
     }
   },
   computed :{
     //实现<下一张  >上一张
     prevIndex (){
       if(this.nowIndex === 0 ){
         return this.slides.length - 1
       }else{
         return this.nowIndex - 1
       }
     },
     nextIndex(){
       if(this.nowIndex === this.slides.length - 1 ){
         return 0
       }else{
         return this.nowIndex + 1;
       }
     }
   },
   methods:{
     goto(index){
       this.isShow = false
       setTimeout(() =>{
         this.isShow = true
         this.nowIndex = index
       },10)
     },
     //自动轮播
     runInv(){
       this.invId = setInterval(() => {
         // console.log(123)
        this.goto(this.nextIndex)
       },this.inv)
     },
     clearInv(){
       clearInterval(this.invId)
     }
   },
   mounted(){
     this.runInv();
   }
 }
</script>

